<!DOCTYPE HTML>
<html>

<head>
      <title> 底部菜单</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
      <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
      <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
      <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
      <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
</head>

<body class="dark-theme">
      <div class="container">
            <div class="detail-page  ">
                  <div class="detail-page-title">
                        <h4>底部菜单
                              <button id="add-nav-btn" class="jx-btn btn-default pull-right">新增卡片</button>
                        </h4>
                  </div>
                  <div class="detail-section">
                        <div class="detail-row">
                              <div>
                                    <div id="grid"></div>
                                    <div></div>
                                    <div></div>
                              </div>
                        </div>
                        <!-- 表格 start-->
                        <!--   <div id="grid"></div> -->
                        <!-- 表格 end-->
                  </div>
            </div>
      </div>
      </div>

      <!-- 初始隐藏 dialog内容    -->
      <div id="content" class="hide">
            <form id="form" class="jx-form form-horizontal jx-form-thin">
                  <div class="row">
                        <div class="control-group span15">
                              <label class="control-label">排序：</label>
                              <div class="controls">
                                    <input type="text" class="control-text" data-rules="{required:true}">
                              </div>
                        </div>
                  </div>
                  <div class="row">
                        <div class="control-group span15">
                              <label class="control-label">轮播图名称：</label>
                              <div class="controls">
                                    <input type="text" class="control-text input-xlarge" data-rules="{required:true}">
                              </div>
                        </div>
                  </div>
                  <div class="row">
                        <div class="control-group control-row6 span12">
                              <label for="" class="control-label has-note">
                    轮播图片:
                    <div class="label-note"> 图标尺寸:<br>
                        px*px
                    </div>
                </label>
                              <div class="controls">
                                    <input id="upload-img" type="file" class="hide">
                                    <a href="#" class="btn-upload">
                        <span>上传图片</span>
                        <img src="" width="98" height="98">
                        <input name="b" type="text" data-rules="{required:true}" value="" style="display: none">
                    </a>

                              </div>
                        </div>
                  </div>
                  <div class="row">
                        <div class="control-group span15">
                              <label class="control-label">色值：</label>
                              <div class="controls">
                                    <input type="text" class="control-text  " data-rules="{required:true}">
                              </div>
                        </div>
                  </div>
                  <div class="row">
                        <div class="control-group span15">
                              <label class="control-label">URL：</label>
                              <div class="controls">
                                    <input type="text" class="control-text input-xlarge" data-rules="{required:true}">
                              </div>
                        </div>
                  </div>
                  <div class="row">
                        <div class="control-group span15">
                              <label class="control-label">状态：</label>
                              <div class="controls" style="line-height: 30px;">
                                    <label class="checkbox">  <input name="status" value="1" type="checkbox">启用 </label>
                              </div>
                        </div>
                  </div>

            </form>
      </div>

      <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
      <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
      <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
      <script type="text/javascript" src="../../../assets/js/admin.js"></script>

      <script type="text/javascript">
            BUI.use('common/page');
            $("#add-nav-btn").click(function () {
                  top.topManager.openPage({
                        id: 'add-new-btn',
                        href: 'templates/marketing/bottom-nav/add-bottom-nav.html',
                        title: '新增卡片'
                  });
            });
      </script>
      <!-- script start -->
      <script>
            BUI.use(['bui/grid', 'bui/data', 'bui/form', 'common/search'], function (Grid, Data, Form, Search) {
                  var Grid = Grid,
                        Store = Data.Store,
                        columns = [{
                                    title: '排序',
                                    dataIndex: 'a',
                                    elCls: 'center', //居中
                                    width: 100
                              }, {
                                    title: '图片',
                                    elCls: 'center',
                                    dataIndex: 'b',
                                    width: 150
                              }, {
                                    title: '类目名称',
                                    elCls: 'center',
                                    dataIndex: 'c',
                                    width: 100
                              }, {
                                    title: 'URL',
                                    elCls: 'center',
                                    dataIndex: 'd',
                                    width: 200
                              }, {
                                    title: '状态',
                                    elCls: 'center',
                                    dataIndex: 'e',
                                    width: 100
                              },
                              {
                                    title: '操作',
                                    dataIndex: 'h',
                                    elCls: 'center',
                                    width: 200,
                                    renderer: function (value, obj) {
                                          var editStr = Search.createLink({ //应用BUI.use([  'common/search'], function ( Search) { 链接使用 此方式
                                                id: 'edit' + obj.id,
                                                title: '编辑',
                                                text: '[ 编辑] ',
                                                href: 'templates/marketing/bottom-nav/add-bottom-nav.html'
                                          });

                                          var delStr =
                                                '<span class="grid-command btn-del">[ 删除 ]</span>';
                                          var frozenStr =
                                                '<span class="grid-command btn-frozen">[ 禁用 ]</span>'; //页面操作不需要使用Search.createLink
                                          return editStr + delStr + frozenStr; //页面操作不需要使用Search.createLink
                                    }
                              }
                        ],
                        data = [{
                              o: '1',
                              a: '1',
                              b: '<img src="../../../assets/img/u9486.png">',
                              c: '女子运动服饰 ',
                              d: '<a href="http://127.0.0.1:32767/start.html#p">http://127.0.0.1:32767/start.html#p</a>',
                              e: '启用',
                              g: '0'
                        }];

                  var store = new Store({ //初始化数据
                              data: data,
                              pageSize: 2 // 配置分页数目
                        }),
                        editing = new BUI.Grid.Plugins.DialogEditing({
                              contentId: 'content', //设置隐藏的Dialog内容
                              autoSave: true, //添加数据或者修改数据时，自动保存
                              triggerCls: 'btn-edit'
                        }),
                        grid = new Grid.Grid({
                              render: '#grid',
                              elCls: 'jx-table-thin',
                              columns: columns,
                              forceFit: true,
                              height: 500,
                              plugins: [editing],
                              bbar: {
                                    // pagingBar:表明包含分页栏
                                    pagingBar: true
                              },
                              store: store
                        });
                  //点击操作
                  grid.on('itemclick', function (ev) {
                        var sender = $(ev.domTarget),
                              itemEl = $(ev.element),
                              item = ev.item;

                        if (sender.hasClass('btn-edit')) { //点击分配操作


                        } else if (sender.hasClass('btn-del')) { //点击刪除操作
                              delFunction(item, itemEl);
                        } else if (sender.hasClass('btn-frozen')) { //点击冻结
                              FrozenFunction(item, itemEl);

                        } else if (sender.hasClass('btn-unfrozen')) { //点击冻结
                              UnfrozenFunction(item, itemEl);

                        }

                  });

                  // 点击添加对图片操作
                  $("#add-account-btn").click(function () {
                        $(".btn-upload").find("span").css("color", "#fff").html("上传图片");
                        $(".btn-upload").find("img").attr("src", "");
                        addFunction();
                  });
                  // 点击编辑对图片操作
                  $("body").on("click", ".btn-edit", function () {
                        $(".btn-upload").find("img").replaceWith($(".btn-upload").find("input")
                              .val());
                        $(".btn-upload").find("span").css("color", "#fff").html("更改图片");
                  });

                  //添加记录
                  function addFunction() {
                        var newData = {
                              b: ''
                        };
                        editing.add(newData, 'a'); //添加记录后，直接编辑
                  }
                  //没有多选插件，删除选中的记录
                  function delFunction(item, itemEl) {
                        BUI.Message.Confirm('确认删除该轮播吗？', function () {
                              /*      $.ajax({
                                  url: basePath + '/mallGoodsBrandFacade/delete',
                                  dataType: 'json',
                                  data: {id: item.id},
                                  success: function (data) {
                                      if (data.status == '0') { //删除成功
                                          store.remove(item);
                                      } else { //删除失败
                                          BUI.Message.Alert(data.info, "error");
                                          BUI.Message.Alert('删除失败！');
                                      }
                                  }
                              });*/
                        }, 'question');
                  }
                  //禁用选中的记录
                  function FrozenFunction(item, itemEl) {

                        BUI.Message.Confirm('确认禁用吗？', function () {
                              //禁用

                              var frozen = $(itemEl).find(".btn-frozen");
                              frozen.replaceWith(
                                    '<span class="grid-command btn-unfrozen">[ 启用 ]</span>'
                              )
                        }, 'question');
                  }

                  function UnfrozenFunction(item, itemEl) {

                        BUI.Message.Confirm('确认启用吗？', function () {
                              var unfrozen = $(itemEl).find(".btn-unfrozen");
                              unfrozen.replaceWith(
                                    '<span class="grid-command btn-frozen">[ 禁用 ]</span>'
                              )
                        }, 'question');
                  }

                  grid.render();


            });
      </script>
      <!-- script end -->

</body>

</html>